<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2022-11-21 10:27:02
 * @LastEditors: Seven
 * @LastEditTime: 2022-11-22 14:20:14
-->
<template>
  <div class="center_bottom">
    <ul class="wrap">
      <li>
        <h3>境外输入</h3>
        <p class="pNum" style="color: #ffa352">{{ chinaTotal.total.input }}</p>
        <p class="ptext" v-if="!chinaTotal.today.input">较昨日待公布</p>
        <p class="ptext" v-else>
          较昨日
          <span style="color: #ffa352">+{{ chinaTotal.today.input }}</span>
        </p>
      </li>
      <li>
        <h3>无症状感染者</h3>
        <p class="pNum" style="color: #791618">
          {{ chinaTotal.extData.noSymptom }}
        </p>
        <p class="ptext" v-if="!chinaTotal.extData.incrNoSymptom">较昨日待公布</p>
        <p class="ptext" v-else>
          较昨日 <span style="color:#791618">+{{ chinaTotal.extData.incrNoSymptom }}</span>
        </p>
      </li>
      <li>
        <h3>现有确诊</h3>
        <p class="pNum" style="color: #e44a3d">
          {{
            chinaTotal.total.confirm -
            chinaTotal.total.dead -
            chinaTotal.total.heal
          }}
        </p>
        <p class="ptext" v-if="!chinaTotal.today.storeConfirm">较昨日待公布</p>
        <p class="ptext" v-else>
          较昨日
          <span style="color: #e44a3d"
            >+{{ chinaTotal.today.storeConfirm }}</span
          >
        </p>
      </li>
      <li>
        <h3>累计确诊</h3>
        <p class="pNum" style="color: #a31d13">
          {{ chinaTotal.total.confirm }}
        </p>
        <p class="ptext" v-if="!chinaTotal.today.confirm">较昨日待公布</p>
        <p class="ptext" v-else>
          较昨日
          <span style="color: #a31d13">+{{ chinaTotal.today.confirm }}</span>
        </p>
      </li>
      <li>
        <h3>累计死亡</h3>
        <p class="pNum" style="color: #333">{{ chinaTotal.total.dead }}</p>
        <p class="ptext" v-if="!chinaTotal.today.dead">较昨日待公布</p>
        <p class="ptext" v-else>
          较昨日 <span style="color: #333">+{{ chinaTotal.today.dead }}</span>
        </p>
      </li>
      <li>
        <h3>累计治愈</h3>
        <p class="pNum" style="color: #34aa70">{{ chinaTotal.total.heal }}</p>
        <p class="ptext" v-if="!chinaTotal.today.heal">较昨日待公布</p>
        <p class="ptext" v-else>
          较昨日 <span style="color: #34aa70">+{{ chinaTotal.today.heal }}</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { currentGET } from "api";
export default {
  data() {
    return {
      chinaTotal: {
        extData: {
          noSymptom: 0,
          incrNoSymptom:0,
        },
        today: {
          confirm: 0,
          dead: 0,
          heal: 0,
          input: 0,
          storeConfirm: 0,
        },
        total: {
          input: 0,
          heal: 0,
          severe: 0,
          dead: 0,
          confirm: 0,
        },
      },
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.pageflag = true;
      currentGET("big6", { status: "全国疫情数据" }).then((res) => {
        if (res) {
          this.$nextTick(() => {
            this.chinaTotal = res;
          });
          // this.chinaTotal.total.input = 200
          this.pageflag = false;
          // this.$Message({
          //   text: res.msg,
          //   type: "warning",
          // });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;
  // background-color: rebeccapurple;
  .wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 33.3%;
      height: 46%;
      // background-color: red;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      h3 {
        font-weight: 600;
        letter-spacing: 2px;
        background: linear-gradient(
          92deg,
          #0072ff 0%,
          #00eaff 48.8525390625%,
          #01aaff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 22px;
      }
      .pNum {
        font-size: 30px;
        font-weight: 700;
      }
      .ptext {
        font-weight: 500;
      }
    }
  }
}
</style>
